<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机线主题</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="random-line.css">
</head>
<body>
    <div class="container position-relative">
        <canvas class="row" id="full" width="1280" height="4782"></canvas>
        <nav class="navbar navbar-expand-lg navbar-light ml-5">
            <a class="navbar-brand" href="/">
                <img src="images/logo.png" height="100" alt="lgog">
            </a>
            <button class="navbar-toggler" data-target="#nav" data-toggle="collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="nav" class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active ml-4 mr-4">
                        <a class="nav-link" href="/product">产品</a>
                    </li>
                    <li class="nav-item active ml-4 mr-4">
                        <a class="nav-link" href="#">价格</a>
                    </li>
                    <li class="nav-item active ml-4 mr-4">
                        <a class="nav-link" href="/blog">博客</a>
                    </li>
                    <li class="nav-item active ml-4 mr-4">
                        <a class="nav-link" href="/contact">联系</a>
                    </li>
                </ul>
                <form class="form-inline position-relative">
                    <canvas id="register" width="114" height="38"></canvas>
                    <button class="btn btn-md text-primary mt-4" type="button">&ensp;&emsp;注册&emsp;&emsp;</button>
                </form>
            </div>
        </nav>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-5">
                <h2>这是一款随机线主题。不要再浪费你的时间了，现支持 H5，Angular 跨平台。</h2>
                <div class="input-group input-group-lg position-relative">
                    <input type="text" class="form-control" placeholder="请输入邮件">
                    <div class="input-group-append">
                        <span class="input-group-text">→</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-5">
                <h4>我们知道你的时间是宝贵的。所以我们的应用很简洁。</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-3">
                <div class="card">
                    <img class="card-img-top" src="images/measurable.png" alt="mesurable">
                    <div class="card-body">
                        <h4 class="card-title">衡量</h4>
                        <p class="card-text">每一个细节都有一个衡量标准，用数据说话。</p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <img class="card-img-top" src="images/tracked.png" alt="tracked">
                    <div class="card-body">
                        <h4 class="card-title">跟踪</h4>
                        <p class="card-text">每一个更改都将记录在案，不放过每一次变更。</p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <img class="card-img-top" src="images/collaborative.png" alt="collabortive">
                    <div class="card-body">
                        <h4 class="card-title">协作</h4>
                        <p class="card-text">我们有一支优秀的4人团队，从设计到开发，共同努力。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">设置里程碑</h4>
                        <p class="card-text">只需要简单使用，填写计划节点，剩下的工作我们将帮助您管理您的里程碑。</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <img src="images/milestone.png" width="376" alt="milestone">
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-4">
                <img src="images/task.png" width="358" alt="task">
            </div>
            <div class="col-4">
                <div class="card" style="margin-top:50px;">
                    <div class="card-body">
                        <h4 class="card-title">建立积分系统</h4>
                        <p class="card-text">我们将帮助您管理你的积分系统，只需制定简单的规则，或者什么也不做，保持默认就好。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">一切都是精确计算。你会得到一个统计图表，可以按每天、每月查看，永不错过。</h4>
                        <p class="card-text">我们知道，数据永远不会说谎。所以每一项任务都被列出来了，每一秒都没有错过，每一个项目，每一个里程碑都被罗列出来了。</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <img src="images/statistics.png" width="375" alt="statistics">
            </div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-4">
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title">你还在等什么？</h2>
                        <h4 class="card-text">请在下面填写您的电子邮件，我们将告诉您什么时候推出新版本!</h4>
                    </div>
                </div>
                <div class="input-group input-group-lg">
                    <input type="text" class="form-control" placeholder="请输入邮件">
                    <div class="input-group-append">
                        <span class="input-group-text">→</span>
                    </div>
                </div>
            </div>
        </div>
        <footer class="row position-relative">
            <canvas id="footer" width="1280" height="256"></canvas>
            <div class="col-4"></div>
            <div class="col-2">
                <ul>
                    <li><a href="/">主页</a></li>
                    <li><a href="/">它是如何工作的</a></li>
                    <li><a href="/">产品特点</a></li>
                    <li><a href="/">价格</a></li>
                </ul>
            </div>
            <div class="col-2">
                <ul>
                    <li><a href="/">关于我们</a></li>
                    <li><a href="/">多媒体</a></li>
                    <li><a href="/">工作机会</a></li>
                    <li><a href="/">博客</a></li>
                </ul>
            </div>
            <div class="col-2">
                <ul>
                    <li><a href="/">支持</a></li>
                    <li><a href="/">安全</a></li>
                    <li><a href="/">隐私策略</a></li>
                    <li><a href="/">服务条款</a></li>
                </ul>
            </div>
        </footer>
    </div>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/roughjs/dist/rough.min.js"></script>
    <script src="random-line.js"></script>
</body>
</html>